<template>
  <div>
       <table border="1" align="center" width="400" cellspacing="0">
        <caption>
            <h3>欢迎光临vue开发的收银系统水果店</h3>
        </caption>
        <tr>
            <th align="center">{{bt}}</th>
        </tr>
        <tr>
          <th align="center">请输入你要购买的斤数<input  v-model="num" value="0" type="number"></th>
        </tr>
        <tr>
          <th align='center'>
            <button @click="add">结账买单~</button>
          </th>
        </tr>
        <tr>
          <th align='center'>
        结账单:总价:{{total}}¥元 折后价{{zhekou}}¥元 省了:{{shen}}¥元 
          </th>
        </tr>
    </table>   
  </div>
</template>

<script>
export default {
  name: 'N2App',

  data() {
    return {
      bt:'苹果10¥/斤,折扣<8折>',
      num:0,
      total:0,
      zhekou:0,
      shen:0,
    };
  },
  methods: {
    add(){
       this.total = this.num*10
       this.zhekou =this.total*0.8
       this.shen =this.total-this.zhekou
    }
  },
};
</script>

<style lang="scss" scoped>

</style>